import {Component, OnInit, Input} from '@angular/core';
import Map from 'ol/Map';
import {ScaleLine} from 'ol/control';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
import {UtilComponent} from '../../interface/util-component.interface';
import View from 'ol/View';

@Component({
    selector: 'kylin-scale-line',
    templateUrl: './scale-line.component.html',
    styleUrls: ['./scale-line.component.less']
})
export class ScaleLineComponent implements OnInit, UtilComponent {
    // ---------- 接口实现 begin -------------- //
    hasContent = true;
    map: Map;
    view: View;

    @Input() set data(val) {
        Object.assign(this, val);
    };

    // ---------- 接口实现 end ---------------- //
    scaleLineControl;
    optionList: any[];
    selectedValue = 'degrees';
    tile;
    control;

    constructor() {
    }

    ngOnInit() {
        // this.turnOn();
    }

    turnOn = () => {
        this.getData();
        this.getScaleLine();
    }

    turnOff = () => {
        this.map.removeControl(this.scaleLineControl);
        this.view = new View({
            zoom: 5,
            center: [108.943904, 34.319323],
            projection: 'EPSG:3857',
            minZoom: 0
        });
        this.map.setView(this.view)
    }

    toggle = (options?: any) => {
        if (options) {
            this.turnOn();
        } else {
            this.turnOff();
        }
    }

    getScaleLine() {
        this.scaleLineControl = new ScaleLine({
            units: 'degrees',
            target: this.map.getTarget()
        });
        this.map.addControl(this.scaleLineControl);
    }

    log(value): void {
        this.scaleLineControl.setUnits(value);
    }

    getData() {
        this.optionList = [
            {
                value: 'degrees',
                label: '度',
            },
            {
                value: 'imperial',
                label: '英寸',
            },
            {
                value: 'us',
                label: '美国英寸',
            },
            {
                value: 'nautical',
                label: '海里',
            },
            {
                value: 'metric',
                label: '公',
            },

        ]
    }

}
